import BaseView from "../baseview.js";

export default class UpdateStudentInfo extends BaseView{

     constructor(id,stuid){
         super(id);
         this.stuid=stuid;
         super.init();
         this.mouted();

     }

     render(){
         $("#show_content").html(
             `
             <div style='margin:50px auto'>
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                <input id="studentName" type="text" name="name"  autocomplete="off" class="layui-input">
            </div> 
        </div>
  <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-inline">
        <input type="text" id="studentAge"   autocomplete="off" class="layui-input">
        </div>
    </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" id="M" name="sex"   value="男" title="男">
      <input type="radio" id='F' name="sex"   value="女" title="女">
    </div>
  </div>
  <div class="layui-form-item">
            <label class="layui-form-label">所在班级</label>
            <div class="layui-input-inline">
            <select id="classes" name="interest" lay-filter="aihao">
             </select>
            </div>
        </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
    <button id='updateBtn' type='button' class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
    <button id='backBtn' type='button' class="layui-btn" lay-submit lay-filter="formDemo">返回</button>
    </div>
  </div>
</form>
</div>
   `
         )
     }

     addlayuiJs(){
        $("#addscript").html(
        `<script>
        var myform = null;
        layui.use('form', function(){
          myform = layui.form;
        });
        </script>`
        )} 

          //查询信息
         showStudentDetail(){
            $.ajax({
                type:"get",
                url:"/api/student/showstudentInfoDetail",
                data:{
                  "studentid":this.stuid
                },
                dataType:"json",
                success(data){
                     console.log(data);
                     $("#studentName").val(data.name);
                     $("#studentAge").val(data.age);
                     if(data.gender==='男'){
                       //console.log("男");
                         $("#M").attr("checked","checked");
                     }else{
                     // console.log("女");
                      $("#F").attr("checked","checked");
                     }
                        //设置当前班级被选中
                       $(`option[value=${data.classid._id}]`).attr("selected","selected");
                     //重新渲染
                     myform.render();
                }
            });
         }
         //查询班级
         showClasses(){    
          $.ajax({
            type:"get",
            url:"/api/classes/getAllClasses",
            dataType:"json",
            success(data){
               console.log(data);
               //拼接option
               let str="";
                $.each(data,(i,classObj)=>{
                 str+=`<option value='${classObj._id}'>${classObj.name}</option>`;
                });
                $("#classes").html(str);
                //重新渲染
                myform.render();
            }
         })
         }

        //挂载数据
       async mouted(){
            await  this.showClasses();
            await this.showStudentDetail();
          }
           //返回显示列表
           goback(){
              window.location.hash="#/main/studentList";
           }
           //修改信息
           updateStudentInfo(){
              $.ajax({
                  type:"post",
                  url:"/api/student/updatestudentInfo",
                  data:{
                    studentid:this.stuid,
                    name:$("#studentName").val(),
                    age: $("#studentAge").val(), 
                    gender:$("input[type='radio']:checked").val(),
                    classid:$("#classes").val()
                  },
                  dataType:"json",
                  success(data){
                       if(data.code===0){
                         alert(data.msg);
                         window.location.hash="/#main/studentList";
                       }    
                  }
              });
           }

          handle(){
              $("#updateBtn").click(()=>{
                  this.updateStudentInfo();
              });
              $("#backBtn").click(()=>{
                this.goback();
            });
          }


}